<template>
    <div class="rContainer">
        <!-- 第一部分 -->
        <div class="rOne">
            <div class="tiOne">
                <div class="conf" @click="openTargetPage"> {{ form.availableAreas }}</div>
            </div>
            <div class="tiTwo">数据中心</div>
        </div>
        <!-- 第二部分 -->
        <div class="rTwo">
            <div class="rtItem">
                <div class="s1">位置</div>
                <div class="s2">
                    <dv-border-box-12 class="containerD">
                        <div class="text">{{ form.location }}</div>
                    </dv-border-box-12>
                </div>
            </div>
            <div class="rtItem">
                <div class="s1">经纬度</div>
                <div class="s2">
                    <dv-border-box-12 class="containerD">
                        <div class="text"><span>{{ form.longitude }}</span> <span>{{ form.latitude }}</span></div>
                    </dv-border-box-12>
                </div>
            </div>
            <div class="rtItem">
                <div class="s1">开放年份</div>
                <div class="s2">
                    <dv-border-box-12 class="containerD">
                        <div class="text">{{ form.yearOpened }}</div>
                    </dv-border-box-12>
                </div>
            </div>
            <div class="rtItem">
                <div class="s1">使用组织机构</div>
                <div class="ssA">
                    <dv-border-box-12>
                        <div class="containerTwo">
                            <div class="text">{{ form.useAge }}</div>
                        </div>
                    </dv-border-box-12>
                </div>
            </div>
            <div class="rtItem">
                <div class="s1">承载云服务数</div>
                <div class="s2">
                    <dv-border-box-12 class="containerD">
                        <div class="text">{{ form.cloudServerCount }}</div>
                    </dv-border-box-12>
                </div>
                <!-- <div class="ssA">
                    <dv-border-box-12>
                        <div class="containerTwo">
                            <div class="text">
                                <div class="list-item" v-for="(item, index) in cloudListData" :key="index">
                                    <div class="nkOneC">{{ item }}</div>
                                </div>
                            </div>
                        </div>
                    </dv-border-box-12>
                </div> -->域名分布

            </div>
            <div class="rtItem">
                <div class="s1">IP规模</div>
                <div class="ssA">
                    <dv-border-box-12>
                        <div class="containerTwo">
                            <div class="text">
                                <div class="nkOneC">ipv4:{{ ipv4 }}</div>
                            </div>
                        </div>
                    </dv-border-box-12>
                </div>
            </div>
        </div>
        <!-- 第三部分 -->
        <div class="rThree">
            <div class="rThreeC">
                已探测
                <span>&nbsp;{{ form.assetCount }}&nbsp;</span>
                条结果(<span>&nbsp;{{ form.ipCount }}&nbsp;</span>条独立IP)
            </div>
        </div>
        <!-- 第四部分 -->
        <div class="rFour">
            <div class="rFOne">
                <div class="rti">域名分布</div>
                <div class="ku">
                    <dv-border-box-12>
                        <div class="list-container">
                            <div class="list-item" v-for="(item, index) in domainDistribution" :key="index">
                                <div class="nkOneC">{{ item.domain }}</div>
                                <div class="nkTwoC">{{ item.domainCount }}</div>
                            </div>
                        </div>
                    </dv-border-box-12>
                </div>
            </div>
            <div class="rFOne">
                <div class="rti">IP资产排名</div>
                <div class="ku">
                    <dv-border-box-12>
                        <div class="list-container">
                            <div class="list-item" v-for="(item, index) in form.ipSort" :key="index">
                                <div class="nkOneC">
                                    <div class="content_ip" @click="openAssetPage(item.ip)">{{ item.ip }}</div>
                                </div>
                                <div class="nkTwoC">{{ item.ipCount }}</div>

                            </div>
                        </div>
                    </dv-border-box-12>
                </div>
            </div>
            <div class="rFOne">
                <div class="rti">端口排名</div>
                <div class="ku">
                    <dv-border-box-12>
                        <div class="list-container">
                            <div class="list-item" v-for="(item, index) in form.portSort" :key="index">
                                <div class="nkOneC">
                                    <div class="content_ip" @click="openPortPage(item.port)">{{ item.port }}</div>
                                </div>
                                <div class="nkTwoC">{{ item.portCount }}</div>
                            </div>
                        </div>
                    </dv-border-box-12>
                </div>
            </div>
            <div class="rFOne">
                <div class="rti">Server排名</div>
                <div class="ku">
                    <dv-border-box-12>
                        <div class="list-container">
                            <div class="list-item" v-for="(item, index) in form.severSort" :key="index">
                                <div class="nkOneC">
                                    <div class="content_ip" @click="openServepage(item.field)">{{
                                        item.field }}</div>
                                </div>
                                <div class="nkTwoC">{{ item.count }}</div>
                            </div>
                        </div>
                    </dv-border-box-12>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            detectionResult: '',
            independentIP: '',
            form: {},
            cloudListData: [],
            ipListData: [],
            probeResultConnectCloudList: [],
            domainDistribution: [],
            ipDistribution: [],
            portRank: [],
            serveRank: [],
            ipv4: '',
        };
    },

    mounted() {
        this.getTop();
    },
    watch: {
        "$store.state.rightDetails.detailOneData": {
            handler() {
                this.getTop()
            }
        }
    },
    methods: {
        openTargetPage() {
            window.open(`/datalist?availableAreas=${this.form.availableAreas}`, '_self')
        },
        openAssetPage(ip) {
            window.open(`/assetlist?ip=${ip}`, '_self')
        },
        openPortPage(port) {
            window.open(`/assetlist?port=${port}`, '_self')
        },
        openServepage(service) {
            window.open(`/assetlist?service=${service}`, '_self')
        },

        getTop() {
            // console.log('$store.state.rightDetails.detailOneData', this.$store.state.rightDetails.detailOneData);
            const data = this.$store.state.rightDetails.detailOneData;
            for (let key in data) {
                // target: 需要设置属性的对象。
                // propertyName/index: 需要设置的属性名称（对于对象）或索引（对于数组）。
                // value: 设置的值。
                this.$set(this.form, key, data[key]);
            }
            // console.log('form', this.form);
            this.ipv4 = this.form.ipScale[0].ipv4
        },
    },

    // const rightDetails = this.$store.state.rightDetails
    // const topData = rightDetails.topData
    // Object.assign(this.form, topData.dataCenterInfoList[0])
    // this.cloudListData = topData.probeResultConnectCloudList
    // this.ipListData = topData.ipNetCloudServiceInfoList
    // this.detectionResult = topData.detectionResult
    // this.independentIP = topData.independentIP

    // this.domainDistribution = rightDetails.areaData
    // this.ipDistribution = rightDetails.ipData
    // this.portRank = rightDetails.portData
    // this.serveRank = rightDetails.serverData

};
</script>

<style lang="scss" scoped>
.rContainer {
    width: 400px;
    margin: 0px auto;
    padding: 10px;

    .rOne {
        padding-top: 15px;
        // height: 80px;
        color: white;

        .tiOne {
            font-size: 28px;
            font-weight: 700;
            padding-bottom: 8px;

            .conf {
                border-bottom: 1px solid white;
                display: inline;
                padding-bottom: 2px;
                cursor: pointer;
                line-height: 36px;
            }

            .conf:hover {
                color: #00B0FF;
                border-bottom: 1px solid #00B0FF;
            }
        }

        .tiTwo {
            font-size: 16px;
            margin-top: 5px;
            margin-bottom: 10px;
        }
    }

    .rTwo {
        width: 400px;
        // height: 360px;
        color: white;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .rtItem {
            width: 195px;
            height: 100px;
            display: flex;
            flex-direction: column;

            // 小标题
            .s1 {
                margin-bottom: 5px;
                height: 18px;
            }

            .s2 {
                height: 50px;

                .containerD {
                    width: 100%;
                    height: 50px;

                    .text {
                        font-size: 16px;
                        line-height: 50px;
                        text-align: center;
                        white-space: nowrap;
                    }
                }
            }

            .ssA {
                height: 80px;

                .containerTwo {
                    width: 100%;
                    height: 80px;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .text {
                        font-size: 16px;
                        line-height: 23px;
                        width: 80%;
                        height: 40px;
                        overflow: scroll;
                        scrollbar-width: none; //隐藏滚动条  /* 适用于 Firefox */
                        -ms-overflow-style: none;
                        /* 适用于 Internet Explorer 和 Edge */
                    }
                }
            }

            .s3 {
                width: 180px;
                height: 50px;

                .text {
                    display: flex;
                    justify-content: center;
                    line-height: 50px;
                }
            }
        }
    }

    .rThree {
        width: 100%;
        height: 50px;

        .rThreeC {
            font-size: 16px;
            color: white;
            line-height: 50px;
        }
    }

    .rFour {
        width: 100%;
        // height: 480px;

        .rFOne {
            height: 115px;
            display: flex;
            flex-direction: column;
            margin-bottom: 5px;

            .rti {
                color: white;
                font-size: 16px;
                margin-bottom: 4px;
            }

            .ku {
                flex: 1;
                position: relative;
                height: 105px;

                .list-container {
                    user-select: none;
                    position: absolute;
                    top: 10px;
                    width: 90%;
                    height: 75px;
                    margin-left: 20px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    overflow: scroll;
                    scrollbar-width: none; //隐藏滚动条  /* 适用于 Firefox */
                    -ms-overflow-style: none;
                    /* 适用于 Internet Explorer 和 Edge */
                }

                .list-item {
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    margin-bottom: 4px;
                    padding: 5px;
                }

                // .nkOneC {
                //     .content_ip {
                //         cursor: pointer;
                //         display: inline;
                //         border-bottom: 1px solid white;
                //     }

                //     .content_ip:hover {
                //         color: #00B0FF;
                //         border-bottom: 1px solid #00B0FF;
                //     }
                // }

                .nkTwoC {
                    text-align: right;
                    padding-right: 10px;
                }
            }
        }
    }
}
</style>